<template>
  <div>
    <!-- 我参加的活动 -->
    <div class="typeButtons">
      <el-tabs v-model="queryInfo.state" @tab-click="handleTabChange">
        <el-tab-pane
            v-for="(state, index) in listStates"
            :key="index"
            :name="`${index}`">
          <span slot="label"><span v-html="state"></span></span>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-main class="records" v-loading="loading">
      <el-empty style="width: 100%" v-show="activitySignups.length === 0"/>
      <div
          v-for="signup in activitySignups"
          :key="signup.id"
          class="record"
      >
        <div class="text">
          <el-descriptions column="2">
            <template slot="title">
              <span style="cursor:pointer;" @click="openDialog(signup)">{{ signup.activityName }}</span>
              <el-button v-if="signup.status===500" type="warning" size="mini" style="margin-left: 10px" @click="goToEditFeedBack(signup)">填写反馈
              </el-button>
            </template>
            <template v-if="signup.captain.userId === currentUserId" slot="extra">
              <span class="option" style="cursor: pointer;color: dodgerblue">
              <el-link type="primary" @click.stop="editable=!editable; editId=signup.id">
                <span v-if="!editable">编辑</span>
                <span v-else>完成</span>
              </el-link>
            </span>
            </template>
            <template v-else slot="extra">
              <span class="option" style="cursor: pointer;color: dodgerblue">
              <el-link type="primary" @click.stop="exitTeam(signup.id)">
                <span>退出小队</span>
              </el-link>
            </span>
            </template>
            <el-descriptions-item label="队伍">{{ signup.name }}
              <el-tooltip class="item" effect="dark" content="取消报名" placement="top-start">
                <el-button
                    class="button-new-tag"
                    size="mini"
                    style="color: red;"
                    v-show="editable && editId===signup.id"
                    icon="el-icon-delete"
                    circle
                    @click.stop="cancelSignup(signup)"
                />
              </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="指导教师">
              <el-popover
                  v-if="signup.teacher !== null"
                  placement="bottom-start"
                  trigger="hover"
              >
                <div class="popover">
                  <div class="row"><label>姓名</label>{{ signup.teacher.name }}</div>
                  <div class="row"><label>职工号</label>{{ signup.teacher.userId }}</div>
                  <div class="row"><label>学院</label>{{ collegeMap[signup.teacher.collegeId] }}</div>
                </div>
                <el-tag slot="reference" size="small" class="teacher">{{ signup.teacher.name }}</el-tag>
              </el-popover>
              <el-tag v-if="signup.teacher === null" size="small" type="info">暂无</el-tag>
              <el-tooltip class="item" effect="dark" content="修改指导老师" placement="top-start">
                <el-button
                    class="button-new-tag"
                    size="mini"
                    v-show="editable && editId===signup.id"
                    icon="el-icon-edit"
                    circle
                    @click.stop="changeNewTeacher = true"
                />
              </el-tooltip>

              <el-dialog title="修改指导老师"
                         :visible.sync="changeNewTeacher"
                         append-to-body>
                <el-form>
                  <el-form-item label="修改指导老师">
                    <el-select
                        v-model="newTeacher"
                        size="small"
                        style="width: 300px"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入学号"
                        :remote-method="remoteMethodTeacher"
                        :loading="loading"
                        clearable>
                      <el-option
                          v-for="item in teacherOptions"
                          :key="item.label"
                          :label="item.value + item.label"
                          :value="item.label">
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="changeNewTeacher = false">取 消</el-button>
                  <el-button type="primary" @click="changeTeacher(signup)">确 定</el-button>
                </div>
              </el-dialog>
            </el-descriptions-item>
            <el-descriptions-item label="小队成员">
              <el-popover
                  placement="bottom-start"
                  trigger="hover"
              >
                <el-tag
                    slot="reference"
                    size="small"
                    type="primary"
                    :disable-transitions="false"
                    style="margin-left: 10px; z-index: 90"
                >{{ signup.captain.name }}
                </el-tag>
                <div class="popover">
                  <div class="row"><label>身份</label>队长</div>
                  <div class="row"><label>姓名</label>{{ signup.captain.name }}</div>
                  <div class="row"><label>学号</label>{{ signup.captain.userId }}</div>
                  <div class="row"><label>学院</label>{{ collegeMap[signup.captain.collegeId] }}</div>
                  <div class="row"><label>专业</label>{{ majorMap[signup.captain.majorId] }}</div>
                </div>
              </el-popover>
              <el-popover
                  v-for="(member, index) in signup.students"
                  :key="index"
                  placement="bottom-start"
                  trigger="hover"
              >
                <el-tag
                    slot="reference"
                    size="small"
                    :closable="editable && editId===signup.id"
                    type="success"
                    :disable-transitions="false"
                    style="margin-left: 10px; z-index: 90"
                    @close="removeMember(signup,member)"
                >{{ member.name }}
                </el-tag>
                <div class="popover">
                  <div class="row"><label>身份</label>成员</div>
                  <div class="row"><label>姓名</label>{{ member.name }}</div>
                  <div class="row"><label>学号</label>{{ member.userId }}</div>
                  <div class="row"><label>学院</label>{{ collegeMap[member.collegeId] }}</div>
                  <div class="row"><label>专业</label>{{ majorMap[member.majorId] }}</div>
                </div>
              </el-popover>
              <el-tooltip class="item" effect="dark" content="邀请新成员" placement="top-start">
                <el-button
                    class="button-new-tag"
                    size="mini"
                    v-show="editable && editId===signup.id"
                    icon="el-icon-plus"
                    @click.stop="inviteNewStudent = true"
                />
              </el-tooltip>

              <el-dialog title="添加队员"
                         :visible.sync="inviteNewStudent"
                         append-to-body>
                <el-form>
                  <el-form-item label="添加队员">
                    <el-select
                        v-model="newTeamMember"
                        size="small"
                        style="width: 300px"
                        multiple
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入学号"
                        :remote-method="remoteMethod"
                        :loading="loading"
                        clearable>
                      <el-option
                          v-for="item in options"
                          :key="item.label"
                          :label="item.value + item.label"
                          :value="item.label">
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="inviteNewStudent = false">取 消</el-button>
                  <el-button type="primary" @click="inviteNewStu(signup)">确 定</el-button>
                </div>
              </el-dialog>


            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div
            v-if="strExists(signup.collegeOpinion) || strExists(signup.universityOpinion)"
            style="width: 100%;
                  height:1px;
                  border-bottom:1px solid #DCDFE6;
                   margin-bottom: 10px"
        ></div>
        <el-descriptions column="1">
          <el-descriptions-item v-if="strExists(signup.collegeOpinion)"
                                label="学院意见">
            {{ signup.collegeOpinion }}
          </el-descriptions-item>
          <el-descriptions-item v-if="strExists(signup.universityOpinion)"
                                label="学校意见">
            {{ signup.universityOpinion }}
          </el-descriptions-item>
        </el-descriptions>
        <div
            style="width: 100%;
                  height:1px;
                  border-bottom:1px solid #DCDFE6;
                   margin-bottom: 10px"
        ></div>
        <div class="state">
          <span>小队创建时间：{{ signup.createTime }}</span>
          <span v-html="states[signup.status]"> </span>
        </div>
      </div>
    </el-main>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
          hide-on-single-page
          @size-change="handleQueryChange"
          @current-change="handleQueryChange"
          :current-page.sync="queryInfo.pageNum"
          :page-sizes="[10, 30, 50]"
          :page-size="queryInfo.pageSize"
          layout="sizes, prev, pager, next"
          :total="totalNum">
      </el-pagination>
    </div>

    <!-- 对话框 -->
    <!--    <transition name="el-zoom-in-bottom">-->
    <el-dialog
        :visible.sync="showDialog"
        :destroy-on-close="true"
        width="60%"
        append-to-body
        :modal-append-to-body='false'
    >
      <template slot="title">
        {{ dialogInfo.activityName }}
        <span style="margin-left:10px; font-size: 14px " v-html="states[dialogInfo.status]"/>
      </template>
      <hr>
      <div class="content">
        <div class="row"><label>队伍名称</label>{{ dialogInfo.name }}</div>
        <div v-if="dialogInfo.teacher !== null" class="row"><label>指导教师</label>
          <el-popover
              placement="bottom-start"
              trigger="hover"
          >
            <div class="popover">
              <div class="row"><label>姓名</label>{{ dialogInfo.teacher.name }}</div>
              <div class="row"><label>职工号</label>{{ dialogInfo.teacher.userId }}</div>
              <div class="row"><label>学院</label>{{ collegeMap[dialogInfo.teacher.collegeId] }}</div>
            </div>
            <el-tag slot="reference" size="small" class="teacher">{{ dialogInfo.teacher.name }}</el-tag>
          </el-popover>
        </div>
        <div class="row"><label>队伍队长</label>
          <el-popover
              placement="bottom-start"
              trigger="hover"
          >
            <div class="popover">
              <div class="row"><label>姓名</label>{{ dialogInfo.captain.name }}</div>
              <div class="row"><label>学号</label>{{ dialogInfo.captain.userId }}</div>
              <div class="row"><label>学院</label>{{ collegeMap[dialogInfo.captain.collegeId] }}</div>
              <div class="row"><label>专业</label>{{ majorMap[dialogInfo.captain.majorId] }}</div>
            </div>
            <el-tag slot="reference" size="small" class="teacher">{{ dialogInfo.captain.name }}</el-tag>
          </el-popover>
        </div>
        <div class="row"><label>队伍成员</label>
          <el-popover
              v-for="(member, index) in dialogInfo.students"
              :key="index"
              placement="bottom-start"
              trigger="hover"
          >
            <el-tag
                slot="reference"
                size="small"
                type="success"
                :disable-transitions="false"
                style="margin-right: 10px; z-index: 90"
            >{{ member.name }}
            </el-tag>
            <div class="popover">
              <div class="row"><label>姓名</label>{{ member.name }}</div>
              <div class="row"><label>学号</label>{{ member.userId }}</div>
              <div class="row"><label>学院</label>{{ collegeMap[member.collegeId] }}</div>
              <div class="row"><label>专业</label>{{ majorMap[member.majorId] }}</div>
            </div>
          </el-popover>
        </div>
        <div class="row" v-if="strExists( dialogInfo.collegeOpinion)"><label>学院意见</label>{{ dialogInfo.collegeOpinion }}
        </div>
        <div class="row" v-if="strExists(dialogInfo.universityOpinion)"><label>学校意见</label>{{
            dialogInfo.universityOpinion
          }}
        </div>
        <el-divider/>
        <div class="plan_title" style="font-weight: bold; font-size: 120%">执行策划</div>
        <el-descriptions v-if="strExists(dialogInfo.plan) && strExists(dialogInfo.plan.planContent)" column="2"
                         style="padding-top: 10px">
          <el-descriptions-item
              label="预计执行时间">
            {{ dialogInfo.plan.planStartTime }}
          </el-descriptions-item>
          <el-descriptions-item
              label="预计结束时间">
            {{ dialogInfo.plan.planEndTime }}
          </el-descriptions-item>
        </el-descriptions>
        <p v-if="dialogInfo.plan !== null" v-html="dialogInfo.plan.planContent"/>
        <el-link v-if="dialogInfo.plan !== null" type="success" :href="handleURI(dialogInfo.plan.uri)">下载附件</el-link>
        <el-empty v-if="!(dialogInfo.plan !==null && strExists(dialogInfo.plan.planContent))"
                  description="无策划"></el-empty>
        <div class="dialog-footer" style="text-align: right">
          <!--          <el-button size="mini" @click="showDialog = false">取 消</el-button>-->
          <el-button v-if="dialogInfo.status < 200" size="mini" type="primary" @click="innerEditPlan = true">编辑策划
          </el-button>
          <el-button v-if="dialogInfo.status === 212 ||  dialogInfo.status === 222" size="mini" type="warning"
                     @click="innerEditPlan = true">修改策划并重新申请
          </el-button>
        </div>
        <el-divider/>
        <!-- 时间线 -->
        <div class="timeLine">
          <div class="plan_title" style="font-weight: bold;margin-bottom: 20px; font-size: 120%">时间线</div>
          <el-timeline>
            <el-timeline-item placement="top"
                              v-for="(event,idx) in excludeNull(dialogInfo.timeEvents, dialogInfo.status)"
                              :key="idx"
                              :color="statesColor[event.opEvent]"
                              :timestamp="event.opTime"
            >
              {{ event.opDesc }}
              <span class="opinion" v-if="strExists(event.opEventDesc)"> 审核意见：{{ event.opEventDesc }}</span>
              <span class="optPerson">操作人： {{ event.operatorName }}</span>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <!--      编辑活动策划dialog-->
      <el-dialog
          width="90%"
          title="编辑策划"
          :visible.sync="innerEditPlan"
          append-to-body>
        <editPlan ref="planContent"/>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerEditPlan = false">取消</el-button>
          <el-button type="primary" @click="submitPlan">提交</el-button>
        </div>
      </el-dialog>
    </el-dialog>

    <!--      编辑活动策划dialog-->
    <el-dialog
        :visible.sync="feedbackShow"
        width="90%"
        title="填写反馈"
        append-to-body>
      <el-form ref="feedbackForm" :model="feedback" label-width="60px">
        <el-form-item
            prop="title"
            :rules="{required: true, message : '标题不能为空', trigger: 'blur'}"
            label="标题"
        >
          <el-input v-model="feedback.title" style="width: 300px"/>
        </el-form-item>
        <el-form-item
            prop="author"
            :rules="{required: true, message : '标题不能为空', trigger: 'blur'}"
            label="作者"
        >
          <el-input v-model="feedback.author" style="width: 300px"/>
        </el-form-item>
      </el-form>
      <quillEdior ref="feedbackData"
                  v-model="feedbackContent"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="feedbackShow = false">取消</el-button>
        <el-button type="primary" @click="submitFeedBack">提交反馈</el-button>
      </div>
    </el-dialog>
    <!--    </transition>-->
  </div>
</template>

<script>
import ActivityStates from "@/views/activity/activityStates";
import ActivityStatesAdd from "@/views/activity/manage/FakeActivitiesAdd"
import CacheUtil from "@/utils/CacheUtil";
import editPlan from '../../components/editPlan'
import RequestUtil from "@/utils/RequestUtil";
import ParamsUtil from "@/utils/ParamsUtil";
import quillEdior from "@/views/components/quillEdior";

export default {
  name: 'ActivityStudentManage',
  components: {
    quillEdior,
    editPlan
  },
  data() {
    return {
      feedbackSignup: {},
      feedbackShow: false,
      feedbackContent: '',
      feedback: {
        title: '',
        author: ''
      },

      inviteNewStudent: false,
      currentUserId: CacheUtil.getUser().userId,
      lastActiveType: "-9",
      activitySignups: [],
      states: ActivityStates.states,
      statesIcon: ActivityStates.statesIcon,
      statesColor: ActivityStates.statesColor,
      collegeMap: {},
      majorMap: {},
      queryInfo: {
        keyword: '',
        pageSize: 10,
        pageNum: 1,
        state: '',
      },
      totalNum: 0,
      showDialog: false,
      dialogInfo: {
        teacher: {},
        students: [],
        timeEvents: [{opTIme: '', opDesc: ''}],
        captain: {},
        plan: {}
      },
      editable: false,
      editId: -1,
      innerEditPlan: false,
      newTeamMember: [],
      options: [],
      teacherOptions: [],
      changeNewTeacher: false,
      newTeacher: '',
      loading: false,
    }
  },
  computed: {
    /**
     * 筛除非整数的状态
     * @returns {{}} 对象
     */
    listStates: function () {
      let ret = {}
      for (let key in this.states) {
        if (key % 10 === 0) {
          ret[key] = this.states[key]
        }
      }
      return ret;
    }
  },
  activated() {
    this.getTeamSignupList()
  },
  async created() {
    // 获取队伍数据
    // this.getTeams()
    // console.log(this.currentUserId)
    RequestUtil.sendCacheableRequest("majorList", '/auth/getMajorList').then(majorList => {
      this.majorMap = RequestUtil.listToMap(majorList)
    })
    RequestUtil.sendCacheableRequest("majorList", '/auth/getMajorList').then(collegeList => {
      this.collegeMap = RequestUtil.listToMap(collegeList)
    })
  },
  methods: {
    strExists(str) {
      return (typeof str !== 'undefined' && str !== null && str !== '');
    },
    excludeNull(list, target) {
      let ret = []
      if (list === null) return ret
      list.forEach(item => {
        if (item !== null && item.opEvent <= target + 100 && Date.parse(item.opTime) < new Date()) ret.push(item)
      })
      ret.sort((m, n) => {
        return m.opTime > n.opTime ? 1 : -1
      })
      return ret
    },
    handleURI(uri) {
      return `${this.imgURL}` + uri;
    },
    goToEditFeedBack(signup) {
      this.feedbackShow = true
      this.feedbackSignup = signup
    },
    submitFeedBack() {
      this.$refs["feedbackForm"].validate(res => {
        if (res) {
          this.$axios.post(`${this.HOST}/activity/feedback`, {
            teamId: this.feedbackSignup.id,
            title: this.feedback.title,
            author: this.feedback.author,
            blog: this.$refs.feedbackData.content,
            picturePath: this.$refs.feedbackData.pictureUri
          }).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              this.$message({
                message: '提交反馈成功！',
                type: 'success'
              })
            }
            this.feedbackShow = false
            this.getTeamSignupList()
          })
        }
      })
    },
    exitTeam(activityId) {
      this.$confirm('确认退出该队伍吗？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`${this.HOST}/activity/sign/exit/team/${activityId}`).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '您已成功退出该小队！',
              type: 'success',
              offset: 90,
              duration: 1000
            })
            this.getTeamSignupList()
          }
        })
      })
    },
    getTeamSignupList() {
      this.loading = true
      this.activitySignups = [
      //     {
      //   captain: {},
      //   plan: {},
      //   students: {},
      //   teacher: {}
      // }
      ]
      this.$axios.get(`${this.HOST}/team/list`, {
        params: this.queryInfo
      }).then(res => {
        if (res.data.code === 200) {
          this.activitySignups = res.data.data.list
          this.totalNum = res.data.data.total
          console.log(this.activitySignups)
        }
      })
      this.loading = false
    },
    /**
     * 切换标签
     * @param tab 新标签
     */
    handleTabChange(tab) {
      // console.log(tab, this.queryInfo, this.lastActiveType)
      if (tab.index === this.lastActiveType) {
        this.queryInfo.state = '';
      } else {
        this.lastActiveType = tab.index
      }
      this.getTeamSignupList()
    },
    /**
     * 打开Dialog
     * @param signup 传入Dialog的信息
     */
    openDialog(signup) {
      this.dialogInfo = signup
      this.showDialog = true;
      // this.dialogInfo = signup;
      // console.log(signup);
      let _this = this;
      this.$axios.get(`${this.HOST}/team/${signup.id}`).then(res => {
        _this.dialogInfo = res.data.data
        // console.log("dia", _this.dialogInfo)
      })
    },
    handleQueryChange() {
      this.getTeamSignupList()
    },
    handleSizeChange(size) {
      // console.log(size)
      this.queryInfo.pageSize = size
      this.getTeamSignupList()
    },
    /**
     * 移除成员
     * @param member
     */
    removeMember(signup, member) {
      // console.log(member)
      let _this = this
      this.$confirm(`确认将${member.name}同学移除队伍吗？`, '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO 移除该位同学
        this.$axios.delete(`${this.HOST}/activity/sign/remove/member/${signup.id}/${member.userId}`).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.message,
              type: 'success',
              offset: 90,
              duration: 1000
            })
          }
        })
        this.getTeamSignupList()
      })
    },
    changeTeacher(signup) {
      this.removeMember(signup, signup.teacher.userId)
      this.$axios.post(`${this.HOST}/activity/invite/teacher/${signup.id}/${this.newTeacher}`).then(res => {
        this.changeNewTeacher = false
        if (res.data.code === 200) {
          this.$message({
            message: res.data.message,
            type: 'success',
            offset: 90,
            duration: 1000
          })
        }
        this.getTeamSignupList()
      })
    },
    cancelSignup(signup) {
      this.$confirm('确认取消报名吗？该操作会导致队伍解散！', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`${this.HOST}/activity/sign/${signup.id}`).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: '您已成功取消报名！',
              type: 'success',
              offset: 90,
              duration: 1000
            })
            this.getTeamSignupList()
          }
        })
      })
    },
    //远程搜索学生
    remoteMethod(query) {
      let _that = this
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (query !== '') {
        _that.loading = true;
        this.$axios.get(`${this.HOST}userinfo/stu/simple?condition=${query}`)
            .then(res => {
              let info = res.data.data
              setTimeout(() => {
                _that.loading = false
                _that.options = info
              }, 1000);
            })
      } else {
        this.options = [];
      }
    },
    //远程搜索老师
    remoteMethodTeacher(query) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (query !== '') {
        this.$axios.get(`${this.HOST}/userinfo/teacher/simple?condition=${query}`)
            .then(res => {
              let info = res.data.data
              setTimeout(() => {
                this.teacherOptions = info
              }, 500);
            })
      } else {
        this.teacherOptions = [];
      }
    },
    inviteNewStu(signup) {
      this.$axios.post(`${this.HOST}/activity/sign/invite`, {
        teamId: signup.id,
        members: this.newTeamMember
      }).then(res => {
        this.inviteNewStudent = false
        if (res.data.code === 200) {
          this.$message({
            message: res.data.message,
            type: 'success',
            offset: 90,
            duration: 1000
          })
        }
      })
      this.inviteNewStudent = false
      this.activitySignups = ActivityStatesAdd.list
    },
    submitPlan() {
      this.$refs.planContent.getEditorContent()
      let plan = this.$refs.planContent.plan


      let params = {
        activityTime: plan.time,
        planContent: plan.content,
        activityId: this.dialogInfo.activityId
      }

      const fd = ParamsUtil.convertToFormData(params)
      fd.append("file", this.$refs.planContent.file)
      console.log("fd", fd);

      if (this.dialogInfo.status === 100) {
        this.$axios.put(`${this.HOST}/activity/sign/complete`, fd).then(res => {
          this.innerEditPlan = false
          if (res.data.code === 200) {
            this.$message({
              message: '策划提交成功！',
              type: 'success',
              offset: 90,
              duration: 1000
            })
            this.getTeamSignupList();
          }
        })
      } else if (this.dialogInfo.status === 212 || this.dialogInfo.status === 222) {
        this.$axios.put(`${this.HOST}/activity/sign/complete/after/audit`, fd).then(res => {
          this.innerEditPlan = false
          if (res.data.code === 200) {
            this.$message({
              message: res.data.message,
              type: 'success',
              offset: 90,
              duration: 1000
            })
            this.getTeamSignupList();
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.records {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding-left: 10px;
  flex-direction: row;
  flex-wrap: wrap;

  .record {
    width: 45%;
    min-width: 300px;
    margin-bottom: 30px;
    margin-right: auto;
    //cursor: pointer;
    padding: 20px 20px 10px;
    border: solid rgba(128, 128, 128, 0.51) 1px;
    border-radius: 5px;

    &:hover {
      box-shadow: rgba(119, 119, 119, 0.39) 2px 2px 3px 1px !important;
      transition: 0.5s ease all;
    }

    .el-tag {
      cursor: pointer;
    }


    .option {
      display: none;
    }

    &:hover .option {
      display: block;
      //background-color: red;
    }

    .clearfix {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: baseline;


      .title {
        display: block;
        width: 80%;
        font-weight: bold;
        // 多行省略
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }

    .text {
      font-size: 90%;

      .teacher {
        background-color: rgba(89, 195, 137, 0.28);
        border-color: rgba(100, 215, 152, 0.35);
        color: #3d8b61;
      }

      .button-new-tag {
        cursor: pointer;
        margin-left: 10px;
        height: 25px;
        line-height: 25px;
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }

  .state {
    font-size: 14px;
    font-weight: lighter;

    display: flex;
    justify-content: space-between;
  }
}

.block {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.optPerson {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  color: gray;
  font-size: 90%;
}

.opinion {
  margin-top: 5px;
  font-size: 90%;
  font-weight: lighter;
}

/deep/ .el-dialog__header {
  font-weight: bold;
  width: 100%;
}

/deep/ .el-dialog__body {
  padding-top: 10px;

  .content {
    margin-top: 20px;

    span {
      display: block;
      line-height: 22px;
    }
  }
}

.content {
  //background-color: red;
  .row {
    display: flex;

    label {
      height: 30px;
      display: block;
      color: #99a9bf;
      margin-bottom: 5px;
      width: 80px;
    }
  }
}

.popover {
  .row {
    display: flex;

    label {
      height: 30px;
      display: block;
      color: #99a9bf;
      margin-bottom: 5px;
      width: 80px;
    }
  }
}

</style>
